import { View,Text,Image } from "@tarojs/components";

import arrowIcon from '@/assets/images/arrow.png'

import { IOrderDetailData } from "@/typing";


import { forwardRef } from "react";
import { API_URL } from "@/common/serviveApi";
import dayjs from "dayjs";
interface IAcceptOrderItem {
  orderInfo: IOrderDetailData;
  orderIndex: number;
  handleShowCall:(mobile:string,wechat:string)=>void
  handleShowOrder:(orderInfo)=>void
  handleCompleteOrder:(orderId: number,orderIndex:number) => void;
}

const ConversationOrderItem:React.FC<IAcceptOrderItem>=forwardRef((props,ref)=>{
  const {orderInfo,orderIndex,handleShowOrder,handleShowCall,handleCompleteOrder} = props
   const topicTitle = orderInfo.topic&& orderInfo.topic.title ? orderInfo.topic.title : ''

  return (
   <>
    <View className='mt-34px bg-#fff box-border pt-30px px-22px pb-46px w-684px mx-auto mb-34px'>
    <View className='bg-#F5F5F5 w-full py-23px px-22px box-border  text-26px text-#333333 relative'>
      <View className="text-#8232E8">
        
        {/* <Text>预约通话时间：</Text> */}
        {orderInfo.complete_expire_time && <Text>请在{dayjs.unix(orderInfo.complete_expire_time).format('M月D日 HH:mm:ss')}前联系用户，超时自动完成
          </Text>}
        
      </View>
      
    </View>
    <View className='pl-10px pr-16px box-border flex items-center justify-between mt-30px'>
      <View className='flex items-center'>
        <View className="w-56px h-56px rounded-100px overflow-hidden"><Image src={`${API_URL}${orderInfo.avatar}`} className="w-56px h-56px" ></Image></View>
        <Text className='ml-18px text-#161618 text-30px'>{orderInfo.nickname}</Text>
      </View>
      <View className='flex items-center' onClick={()=>handleShowOrder(orderInfo)}>
          <Text className='text-#555 text-30px'>订单详情</Text>
          <Image src={arrowIcon} className='w-13px h-23px ml-12px'></Image>
      </View> 
    </View>
    <View className='px-8px box-border mt-24px'>
      <View className='text-32px font-medium text-#161618 line-clamp-3 leading-50px'>{topicTitle}</View>
      {orderInfo.remark && <View className='text-28px  text-#555555 line-clamp-3 leading-50px mt-20px'>
        用户备注：{orderInfo.remark}
      </View>}
    </View>
    <View className='pl-14px pr-28px box-border flex items-center justify-between mt-38px'>
      {/* <View className='flex items-center justify-center box-border w-98px h-82px bg-#F5F5F5'>
        <Image src={moreIcon} className="w-56px h-14px"></Image>
      </View> */}

      <View className='flex items-center justify-center box-border w-274px h-82px text-#333 font-bold text-30px bg-#F5F5F5' onClick={()=>handleShowCall(orderInfo.mobile,orderInfo.wechat)}>联系用户</View>
      <View className='flex items-center justify-center box-border w-274px h-82px text-#fff font-bold text-30px bg-#8232E8' onClick={()=>handleCompleteOrder(orderInfo.id,orderIndex)}>完成订单</View>

    </View>
   </View></>
)
})
export default ConversationOrderItem;